<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-blue">
			<block slot="content">能耗信息</block>
			<template slot="backText">
				<text class="cuIcon-back" @tap="beforePage"></text>
			</template>
		</cu-custom>
		<view style="height: 138upx;" class="padding-tb-20 padding-lr-30">
			<view class="search-fixed bg-blue" :style="{marginTop: CustomBar + 'px'}">
				<!-- 时间选择器 -->
				<view class="flex align-center date-select u-font-weight6 bg-blue">
					<picker mode="date" :value="date" start="1970-01-01" @change="DateChange">
						<view class="picker">
							{{date}}
						</view>
					</picker>
					<text class="ph-sousuoshijian position-text text-blue"></text>
				</view>
			</view>
		</view>
		<!-- 主题内容 -->
		<view class="padding-t">
			<view class="">
				<view class="u-main padding">
					<view class="u-font-weight">班组能耗对比</view>
					<view class="u-main-info">
						<view class="column-echarts">
							<u-charts :legend="team.legend" :canvas-id="team.id" :chartType="team.chartType" :cWidth="team.radarWidth"
							 :cHeight="team.radarHeight" :opts="team.opts" :xAxis="team.xAxis" :ref="team.id" />
						</view>
					</view>
					<!-- 电消耗 -->
					<view class="dashed-top padding-tb-30">
						<view class="u-font-weight">电消耗</view>
						<view class="flex">
							<view class="pei-250">
								<u-charts
								 :canvas-id="elCost.id" 
								 :chartType="elCost.chartType"
								 :cWidth="elCost.cWidth" 
								 :cHeight="elCost.cHeight" 
								 :extra="elCost.extra"
								 :opts="elCost.opts"
								 :ref="elCost.id" />
							</view>
							<view class="width100 margin-tb-auto">
								<view class="flex block-blue echarts-legend-height dashed-bottom">
									<view class="basis-sm">Q235B</view>
									<view class="basic-default">256</view>
									<view class="basic-default">42%</view>
								</view>
								<view class="flex block-yellow echarts-legend-height dashed-bottom">
									<view class="basis-sm">Q345B</view>
									<view class="basic-default">256</view>
									<view class="basic-default">42%</view>
								</view>
								<view class="flex block-green echarts-legend-height dashed-bottom">
									<view class="basis-sm">ABC</view>
									<view class="basic-default">256</view>
									<view class="basic-default">42%</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 燃气消耗 -->
					<view class="dashed-top padding-tb-30">
						<view class="u-font-weight">燃气消耗</view>
						<view class="flex">
							<view class="pei-250">
								<u-charts
								 :canvas-id="casCost.id" 
								 :chartType="casCost.chartType"
								 :cWidth="casCost.cWidth" 
								 :cHeight="casCost.cHeight" 
								 :extra="casCost.extra"
								 :opts="casCost.opts"
								 :ref="casCost.id" />
							</view>
							<view class="width100 margin-tb-auto">
								<view class="flex block-blue echarts-legend-height dashed-bottom">
									<view class="basis-sm">燃气</view>
									<view class="basic-default">256</view>
									<view class="basic-default">42%</view>
								</view>
								<view class="flex block-yellow echarts-legend-height dashed-bottom">
									<view class="basis-sm">Q345B</view>
									<view class="basic-default">256</view>
									<view class="basic-default">42%</view>
								</view>
								<view class="flex block-green echarts-legend-height dashed-bottom">
									<view class="basis-sm">ABC</view>
									<view class="basic-default">256</view>
									<view class="basic-default">42%</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 水消耗 -->
					<view class="dashed-top padding-tb-30">
						<view class="u-font-weight">水消耗</view>
						<view class="flex">
							<view class="pei-250">
								<u-charts
								 :canvas-id="waterCost.id" 
								 :chartType="waterCost.chartType"
								 :cWidth="waterCost.cWidth" 
								 :cHeight="waterCost.cHeight" 
								 :extra="waterCost.extra"
								 :opts="waterCost.opts"
								 :ref="waterCost.id" />
							</view>
							<view class="width100 margin-tb-auto">
								<view class="flex block-blue echarts-legend-height dashed-bottom">
									<view class="basis-sm">燃气</view>
									<view class="basic-default">256</view>
									<view class="basic-default">42%</view>
								</view>
								<view class="flex block-yellow echarts-legend-height dashed-bottom">
									<view class="basis-sm">Q345B</view>
									<view class="basic-default">256</view>
									<view class="basic-default">42%</view>
								</view>
								<view class="flex block-green echarts-legend-height dashed-bottom">
									<view class="basis-sm">ABC</view>
									<view class="basic-default">256</view>
									<view class="basic-default">42%</view>
								</view>
								<view class="flex block-purple echarts-legend-height dashed-bottom">
									<view class="basis-sm">ABC</view>
									<view class="basic-default">256</view>
									<view class="basic-default">42%</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 气消耗 -->
					<view class="dashed-top padding-tb-30">
						<view class="u-font-weight">气消耗</view>
						<view class="flex">
							<view class="pei-250">
								<u-charts
								 :canvas-id="airCost.id" 
								 :chartType="airCost.chartType"
								 :cWidth="airCost.cWidth" 
								 :cHeight="airCost.cHeight" 
								 :extra="airCost.extra"
								 :opts="airCost.opts"
								 :ref="airCost.id" />
							</view>
							<view class="width100 margin-tb-auto">
								<view class="flex block-blue echarts-legend-height dashed-bottom">
									<view class="basis-sm">压缩空气</view>
									<view class="basic-default">256</view>
									<view class="basic-default">42%</view>
								</view>
								<view class="flex block-yellow echarts-legend-height dashed-bottom">
									<view class="basis-sm">氧气</view>
									<view class="basic-default">256</view>
									<view class="basic-default">42%</view>
								</view>
								<view class="flex block-green echarts-legend-height dashed-bottom">
									<view class="basis-sm">氮气</view>
									<view class="basic-default">256</view>
									<view class="basic-default">42%</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import {
		post,
		getTime
	} from "@/lib/Util.js";
	import uCharts from '@/components/u-charts/component.vue';
	import {GET_COST_ENERGY_CONSUMP} from '@/common/api/cost.js'
	export default {
		components: {
			uCharts
		},
		data() {
			return {
				date: '',
				team: {
					legend: {
						data: ['电', '燃气', '水'],
						position: 'top',
						float: 'right',
						fontColor: 'rgba(0,0,0,0.60)'
					},
					radarWidth: uni.upx2px(690),
					radarHeight: uni.upx2px(420),
					chartType: "column",
					extraType: "",
					id: "chanliang",
					xAxis: {
						disabled: false,
						disableGrid: false,
					},
					yAxis: {},
					opts: {
						categories: ['甲', '乙', '丙', '丁'],
						series: [{
							name: '水',
							data: [0, 0, 0, ]
						},{
							name: '电',
							data: [0, 0, 0,]
						},{
							name: '燃气',
							data: [0, 0, 0,]
						}]
					}
				},
				elCost: {
					opts: {
						series: [{
							name : "加热电耗",
							data: 0,
							color: '#3088F4'
						},
						{
							name : "轧制电耗",
							data: 0,
							color: '#08d5a5'
						},
						{
							name : "供辅电耗",
							data: 0,
							color: '#ffb708'
						}]
					},
					cWidth: uni.upx2px(250),
					cHeight: uni.upx2px(250),
					chartType: "ring",
					extra: {
						pie: {
						  offsetAngle: 0,
						  ringWidth: 25,
						  labelWidth:0
						}
					},
					extraType: "",
					id: "elcost"
				},
				casCost: {
					opts: {
						series: [{
							name : "燃气",
							data: 0,
							color: '#3088F4'
						}]
					},
					cWidth: uni.upx2px(250),
					cHeight: uni.upx2px(250),
					chartType: "ring",
					extra: {
						pie: {
						  offsetAngle: 0,
						  ringWidth: 25,
						  labelWidth:0
						}
					},
					extraType: "",
					id: "cascost"
				},
				waterCost: {
					opts: {
						series: [{
							name : "新水用量",
							data: 0,
							color: '#3088F4'
						},
						{
							name : "净河水",
							data: 0,
							color: '#08d5a5'
						},
						{
							name : "净环水",
							data: 0,
							color: '#ffb708'
						},
						{
							name : "软水",
							data: 0,
							color: '#7130f4'
						}]
					},
					cWidth: uni.upx2px(250),
					cHeight: uni.upx2px(250),
					chartType: "ring",
					extra: {
						pie: {
						  offsetAngle: 0,
						  ringWidth: 25,
						  labelWidth:0
						}
					},
					extraType: "",
					id: "watercost"
				},
				airCost: {
					opts: {
						series: [{
							name : "压缩空气",
							data: 0,
							color: '#3088F4'
						},
						{
							name : "氮气",
							data: 0,
							color: '#08d5a5'
						},
						{
							name : "氧气",
							data: 0,
							color: '#ffb708'
						}]
					},
					cWidth: uni.upx2px(250),
					cHeight: uni.upx2px(250),
					chartType: "ring",
					extra: {
						pie: {
						  offsetAngle: 0,
						  ringWidth: 25,
						  labelWidth:0
						}
					},
					extraType: "",
					id: "aircost"
				}
			}
		},
		mounted() {
			this.date = getTime()
			this.getInfo()
		},
		methods: {
			beforePage() {
				uni.navigateBack({
					delta: 1
				});
			},
			DateChange(e) {
				this.date = e.detail.value
				this.getInfo()
			},
			async getInfo() {
				let res = await post(GET_COST_ENERGY_CONSUMP, {
					time: this.date
				})
				if(res.code == 0) {
					let data = []
					for(let i = 0; i < res.data.length; i++) {
						data.push({
							name: res.data[i].name,
							data: res.data[i].values
						})
					}
					this.team.opts.series = data
				}
			}
		}
	}
</script>

<style>
</style>
